<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">

    <div>
        <el-input  type="date" v-model="info.time" placeholder="时间" style="display: inline-block; width: 200px;"></el-input>
        <el-input  v-model="info.username" placeholder="管理员名" style="display: inline-block; width: 200px;"></el-input>
        <el-input  v-model="info.msg" placeholder="操作名字" style="display: inline-block; width: 200px;"></el-input>
        <el-input  v-model="info.ipaddr" placeholder="ip地址" style="display: inline-block; width: 200px;"></el-input>
        <el-button icon="el-icon-search" circle @click="searchData()"></el-button>
    </div>

    <el-table
            :data="LogArr"
            border
            style="width: 100%">
        <el-table-column
                prop="id"
                label="编号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="username"
                label="管理员名">
        </el-table-column>
        <el-table-column
                prop="msg"
                label="操作名字">
        </el-table-column>
        <el-table-column
                prop="msgResult.resultName"
                label="结果">
        </el-table-column>
        <el-table-column
                prop="time"
                label="时间">
        </el-table-column>
        <el-table-column
                prop="ipaddr"
                label="ip地址">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button type="text" @click="show(scope.row.id)">详情</el-button>
            </template>
        </el-table-column>
    </el-table>


    <el-pagination
            @current-change="handleCurrentChange"
            background
            layout="prev, pager, next"
            :total="pageTotal">
    </el-pagination>

    <el-dialog title="操作详情" :visible.sync="showDetailsVisible" width="50%">
							<el-form :model="LogOne" status-icon :rules="rules" ref="LogOne" label-width="100px"
                                     class="demo-ruleForm">
                                 <el-form-item prop="data">
                                 <el-input v-model="LogOne.data" readonly="readonly"></el-input>
                                </el-form-item>
                            </el-form>
                        <span slot="footer" class="dialog-footer">
                                  <el-button @click="showDetailsVisible=false">取 消</el-button>
                        </span>
    </el-dialog>

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                LogArr:[],
                showDetailsVisible:false,
                LogOne:{},
                pageTotal:0,
                info:{}
            },
            methods:{
                show:function (a) {
                    app.LogOne.id=a;
                    $.post("/cai/log/getOne/"+a,function (backData) {
                        app.LogOne=backData.data;
                    });
                    app.showDetailsVisible=true;
                },
                searchData:function () {
                    getInfo(1,10);
                }
            }
        });
        function getInfo(a,b) {
            app.info.pageNo = a;
            app.info.pageCount = b;
            $.get("/cai/log/list",app.info,function (backData) {
                app.LogArr=backData.data.currentPageData;
                app.pageTotal=backData.data.currentDataTotal;
            });
        }
        getInfo(1,10);
    </script>
</div>
</body>
</html>